<template>
    <div class="homeswipe" v-if="come">
        <swiper :options="swiperOption">
            <swiper-slide><img src="@/assets/img/index/startPage1.jpg" alt=""></swiper-slide>
            <swiper-slide><img src="@/assets/img/index/startPage2.jpg" alt=""></swiper-slide>
            <swiper-slide>
                <mt-button type="danger" class="come"  @click="hidecome">马上进入</mt-button>
                <img src="@/assets/img/index/startPage3.jpg" alt="">
            </swiper-slide>
            <!-- 分页器 -->
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default {
    data() {
        return {
            come:false,
            swiperOption: {
                pagination: {
                el: '.swiper-pagination', //分页器
                },
                effect : 'cube', //3D正方体轮播（棱柱体不一定是正方体）
                cubeEffect: {
                    slideShadows: true,
                    shadow: true,
                    shadowOffset: 100,
                    shadowScale: 0.6
                }
            }
        }
    },
    methods:{
        hidecome(){
            this.come = false;
        }
    }
}
</script>


<style scoped>
    .homeswipe{
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999999;
        background: antiquewhite;
    }
    .homeswipe >>> .swiper-pagination-bullet-active {
        background: brown;
    }
    img{
        height: 100%;
        width: 100%;
    }
    .come{
        position: absolute;
        bottom: 20%;
        left: 40%;
    }
</style>
